/* eslint-disable vue/no-unused-vars */
/* eslint-disable vue/no-unused-vars */
<template>
  <div class="container">
      <div class="form">
                  <a-form   @submit="handleSubmit">
                    <a-row :gutter="24">
                        <a-col span="8">
                            <a-form-item label="sku名称" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
                              <a-input v-model="form.transformName" placeholder="输入你要查找的名称" />
                            </a-form-item>
                        </a-col>

                        <a-col span="8">
                            <a-form-item label="转单状态" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
                                <a-select
                                  v-model="form.transformStatus"
                                  placeholder="请选择"
                                  @change="handleChange"
                                >
                                  <a-select-option :key="'0'" :value="'null'">
                                    全部
                                  </a-select-option>
                                  <a-select-option :key="'1'" :value="'true'">
                                    启用
                                  </a-select-option>
                                  <a-select-option :key="'2'"  :value="'false'">
                                    禁用
                                  </a-select-option>
                                </a-select>
                              </a-form-item>
                          </a-col>
                          <a-col span="8">
                            <a-form-item label="从skuCode" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
                              <a-input v-model="form.fromProductCode" placeholder="输入商品编码" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row >
                      <a-col span="15">
                          <a-form-item label="创建时间范围" :label-col="{ span: 4 }" :wrapper-col="{ span: 12 }">
                            <a-range-picker
                                style="width:380px;"
                                showTime
                                v-model="rangePicker"
                                format="YYYY-MM-DD HH:mm:ss"
                                 @change="onChange" />
                          </a-form-item>
                        </a-col>

                        <a-col span="9">
                          <a-button class="marginRight" type="primary" @click="handleSubmit" icon="search">查询</a-button>
                              <a-button class="marginRight" @click="resetForm" icon="align-center">重置</a-button>
                              <a-button class="marginRight" type="primary" icon="plus" @click="addConfig(undefined)" >新增</a-button>
                        </a-col>

                    </a-row>

                </a-form>
      </div>

      <a-table :scroll="{ x: 1500 }"
      :rowKey="record => record.id"
      :loading="loading"
      :pagination="false" :columns="columns" :dataSource="tableData">
      <span slot="dispatchWeight" slot-scope="text, record, index">
          {{text}}%
        </span>
        <span slot="transformStatus" slot-scope="text, record, index">
          <a-switch
            style="width:60px"
            :id="index"
            checkedChildren="启用" unCheckedChildren="禁用"
            :checked="record.transformStatus"
            @change="onChangeTransformStatus" />

        </span>
        <span slot="action" slot-scope="text, record">
          <!-- <router-link :to="`/transform-order/configDetail?id=${record.id}`" replace>
                <a-tag color="pink"> 查看配置</a-tag>
          </router-link> -->
           <a-popconfirm
              @confirm="confirmDelete(record)"
              title="确定要删除这个sku配置?"
              okText="确定"
              cancelText="取消"
            >
                <a-tag color="red"> 删除</a-tag>
          </a-popconfirm>
           <a-tag color="green" @click="addConfig(record)"> 编辑</a-tag>
          <!-- <router-link :to="`/newtransform-order/processResult?id=${record.id}`">
                <a-tag color="orange">
                    处理记录
                </a-tag>
          </router-link> -->
        </span>
      </a-table>
      <a-pagination style="text-align:right;margin-top:10px;" @change="onPageChange"  :current="page" :pageSize="size" :total="total" />

      <a-modal width="750px" title="新增转单配置" v-model="visible" @ok="handleOk">
        <add-config ref="actionConfigForm" />
      </a-modal>
  </div>

</template>
<script>
import { areaService, transFormService } from '@/services/index'

import addConfig from './addConfig'

const columns = [
  {
    dataIndex: 'transformName',
    key: 'transformName',
    title: 'sku编码',
    width: 200,
    fixed: 'left'
  },
  {
    title: 'spu编码',
    dataIndex: 'productSpuCode',
    key: 'productSpuCode'
  },
  {
    title: '转前sku',
    dataIndex: 'fromProductCode',
    key: 'fromProductCode'
  },
  {
    title: '生效时间',
    key: 'effectiveDate',
    dataIndex: 'effectiveDate'
  },
  {
    title: '结束时间',
    key: 'invalidDate',
    dataIndex: 'invalidDate'
  },
  {
    title: '执行状态',
    key: 'transformStatus',
    dataIndex: 'transformStatus',
    scopedSlots: { customRender: 'transformStatus' }
  },
  {
    title: '创建时间',
    key: 'createTime',
    dataIndex: 'createTime'
  },
  {
    title: '操作',
    key: 'action',
    width: 200,
    fixed: 'right',
    scopedSlots: { customRender: 'action' }
  }
].map(s => {
  // if (!s.width) {
  //   s.width = 250
  // }
  s.align = 'center'
  return s
})

const formOrigin = {
  transformName: null,
  fromProductCode: null,
  spuCode: 'null',
  startTime: null,
  endTime: null,
  fromBeLocation: 'null',
  transformStatus: 'null'
}

const newLocal='删除失败'
export default {
  components: { addConfig },
  data () {
    return {
      columns,
      form: Object.assign({}, formOrigin),
      provinceList: [],
      spuList: [],
      tableData: [],
      page: 1,
      size: 5,
      total: 0,
      loading: true,
      visible: false,
      rangePicker: [],
      spuCode: '',
      productId: ''
    }
  },
  methods: {
    confirmDelete ({ id, transformStatus }) {
      if(transformStatus) {
        this.$message.error('禁用状态下的sku配置才可以删除！')
        return
      }
      this.loading = true
      transFormService.skuDelete(id).then(
        ({ isSuccess, data }) => {
          this.loading = false
          if (isSuccess) {
            this.loadDataWhereForm()
            this.$message.success('删除成功')
          } else {
            this.$message.error('删除失败')
          }
        }
      )
    },
    handleSubmit () {
      this.loadDataWhereForm(1)
    },
    resetForm () {
      this.form = Object.assign({}, formOrigin)
      Object.assign(this, {
        rangePicker: [],
        spuCode: ''
      })
    },
    handleSpuCode () {},
    handleChange (value) {
      console.log(`selected ${value}`)
    },
    onChange (dates, [effectiveDate, invalidDate]) {
      this.form.startTime = effectiveDate
      this.form.endTime = invalidDate
    },
    addConfig (record) {
      this.visible = true
      setTimeout(() => this.$refs.actionConfigForm.setDataByRecord(record), 10)
    },
    handleOk () {
      this.$refs.actionConfigForm.submit(() => {
        this.visible = false
        this.loadDataWhereForm()
      })
    },
    onPageChange (current) {
      this.loadDataWhereForm(current)
    },
    loadDataWhereForm (forwardPage) {
      if (!this.loading) this.loading = true
      const { page, size } = this
      let page_ = page
      if (forwardPage) page_ = forwardPage
      this.loading = true
      transFormService.dispatchConfigList({ page: page_ - 1, size, ...this.form }).then(
        ({ isSuccess, data }) => {
          this.loading = false
          if (isSuccess) {
            const { content, totalElements } = data
            this.tableData = content
            this.total = totalElements
            this.page = page_
          }
        }
      )
    },
    loadData () {
      this.loadDataWhereForm()
      // transFormService.spuCodeList().then(
      //   ({ isSuccess, data }) => {
      //     if (isSuccess) {
      //       this.spuList = data
      //     }
      //   }
      // )
      // areaService.provinceList().then(
      //   ({ isSuccess, data }) => {
      //     if (isSuccess) {
      //       this.provinceList = data
      //     }
      //   }
      // )
    },
    onChangeTransformStatus (checked, event) {
      const index = event.currentTarget.id
      let transFormConfig = this.tableData[index]
      transFormService.actionDispatchConfig(
        {
          action: 'updateStatus',
          transFormConfig: { ...transFormConfig, transformStatus: checked }
        }
      ).then(
        ({ isSuccess, data, message }) => {
          if (isSuccess) {
            transFormConfig.transformStatus = checked
          } else {
            this.$message.error(message)
          }
        }
      )
    }
  },
  activated () {
    const { spuCode } = this.$route.query
    console.log('spuCode:', spuCode)
    this.form.spuCode = spuCode
    this.loadData()
  },
  deactivated () {
    this.visible = false
    if (this.$refs.actionConfigForm) this.$refs.actionConfigForm.init()
  }
}
</script>
<style scoped>
.marginRight{
    margin-right:10px;
}
.btns{
  display: flex;
  flex-direction: row-reverse;
  padding: 12px;
}
</style>
